<template>
  <div class="info_bg">
    <div class="transportInfo" id="trackingCode">
      <!-- 睿号查询 2018/2/19 23:44 zhangQ -->
      <div class="wrap">
        <div>
          <h1>睿号查询</h1>
          <p>TRACKING CODE</p>
        </div>
        <div class="trackCodeSraech">
          <Form :model="trackingCodeForm">
            <FormItem>
              <Input v-model="trackingCodeForm.orderNo" placeholder="货票号、联运单号、集装箱号" style="width: 300px"></Input>
              <Button icon="ios-search" @click="trackingCodeSearch" class="trackCodeSraechBtn" style="">查询</Button>
            </FormItem>
          </Form>
        </div>

        <Card style="width: 960px; margin-top: 30px;" class="trackShow">
          <div class="trackStep">
            <div class="trackLineBg">
              <div class="trackStepContent">
                <div class="trackStepContentImgDiv"><img src="../../../../../static/img/icon_waitsend.png" alt=""></div>
                <div class="trackStepState">待发运</div>
              </div>
              <div class="lightLine" :class="trackStatusShow<5&&trackStatusShow>=1?'active':''"></div>
              <div class="lightLine" :class="trackStatusShow<5&&trackStatusShow>=2?'active':''"></div>
              <div class="trackStepContent">
                <div class="trackStepContentImgDiv"><img src="../../../../../static/img/icon_transport.png" alt=""></div>
                <div class="trackStepState">运输</div>
              </div>
              <div class="lightLine" :class="trackStatusShow<5&&trackStatusShow>=2?'active':''"></div>
              <div class="lightLine" :class="trackStatusShow<5&&trackStatusShow>=3?'active':''"></div>
              <div class="trackStepContent">
                <div class="trackStepContentImgDiv"><img src="../../../../../static/img/icon_distribution.png" alt=""></div>
                <div class="trackStepState">配送</div>
              </div>
              <div class="lightLine" :class="trackStatusShow<5&&trackStatusShow>=3?'active':''"></div>
              <div class="lightLine" :class="trackStatusShow<5&&trackStatusShow>=4?'active':''"></div>
              <div class="trackStepContent">
                <div class="trackStepContentImgDiv"><img src="../../../../../static/img/icon_sign.png" alt=""></div>
                <div class="trackStepState">签收</div>
              </div>
            </div>
          </div>
          <Row>
            <i-col>
              <h1 v-show="!haveInfo">请输入<span>货票号、联运单号、集装箱号</span>任意一种可对您的货物进行<span>物流追踪</span></h1>
              <h1 style="font-size:20px;" v-show="searchError">
                <Icon type="information-circled" color="red"></Icon>&nbsp;&nbsp;该运单不存在
              </h1>
              <h1 v-show="haveInfo"><span>{{startStationName}}</span>
              </h1>
              <h1 v-show="nohaveInfo">暂无沿途跟踪记录</h1>
              <Timeline>
                <template v-for="item in trackOpstion">
                  <TimelineItem>{{item.time}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.info}}</TimelineItem>
                </template>
              </Timeline>
            </i-col>
          </Row>
        </Card>
      </div>
    </div>
  </div>
</template>
<script>
  import {nbSelect} from '@api/frontEnd'

  export default {
    name: 'trackingCode',
    data () {
      let trackingCodeForm = {
        orderNo: ''
      }
      let haveInfo = false
      let nohaveInfo = false
      let trackOpstion = []
      let startStationName = ''
      let trackStatusShow = 0
      let searchError = false
      let datas = {trackingCodeForm, trackOpstion, startStationName, trackStatusShow, haveInfo, nohaveInfo, searchError}
      return datas
    },
    methods: {
      trackingCodeSearch () {
        this.searchError = false
        this.haveInfo = false
        this.trackOpstion = []
        let number = this.trackingCodeForm.orderNo
        let param = {number}
        if (number) {
          nbSelect(param).then(res => {
            if (+res.data.isSuccess !== 1) {
              this.searchError = true
            } else {
              this.haveInfo = true
              this.nohaveInfo = false
              let trackOpstion = res.data.data.position
              if (!trackOpstion || trackOpstion.length <= 0) {
                this.nohaveInfo = true
              }
              let statusNow = res.data.data.info.status
              switch (statusNow) {
                case 1:
                  this.trackStatusShow = 1
                  break
                case 2:
                  this.trackStatusShow = 1
                  break
                case 3:
                  this.trackStatusShow = 1
                  break
                case 4:
                  this.trackStatusShow = 2
                  break
                case 5:
                  this.trackStatusShow = 3
                  break
                case 6:
                  this.trackStatusShow = 4
                  break
              }
              this.startStationName = res.data.data.info.startStationName
              trackOpstion.sort(function (p1, p2) {
                return new Date(p1.time).getTime() - new Date(p2.time).getTime()
              })
              this.trackOpstion = trackOpstion.reverse()
              this.startStationName = this.trackOpstion[0].info
            }
          })
        }
      }
    }
  }
</script>
<style>
  .trackShow .ivu-timeline-item-head {
    width: 8px;
    height: 8px;
    background-color: #ddd;
    top: 3px;
    left: 2px;
    border-color: #ddd;

  }

  .ivu-timeline li:first-child .ivu-timeline-item-head {
    width: 8px;
    height: 8px;
    background-color: #FECA2E;
    top: 3px;
    left: 2px;
    border-color: #FECA2E;
  }

  .trackShow .ivu-timeline-item-tail {
    top: 2px;
  }

  .trackShow .ivu-timeline-item-content {
    color: #878787;
  }

  .trackShow .ivu-timeline li:first-child .ivu-timeline-item-content {
    color: #E5B31D;
  }

  .trackShow .ivu-row {
    background-color: #FAFAF3;
    padding-top: 30px;
  }

  .trackShow .ivu-timeline {
    margin-left: 30px;
    width: 100%;
  }

  .trackShow h1 {
    margin-left: 30px;
    margin-bottom: 30px;
    font-size: 20px;
  }

  .trackShow span {
    color: #E5B31D;
  }

  .trackShow .ivu-steps {
    width: 960px;
    margin-top: 30px;
    margin-left: 60px;
  }
</style>
<style scoped>
  .info_bg {
    background-image: url("../../../../../static/img/img_homebg01.png");
    background-color: #FFFFFF;
    padding-bottom: 20px;
    padding-top: 80px;
  }

  .transportInfo {
    height: 100%;
    margin: 0 auto;
    width: 960px;
  }

  .trackCodeSraech {
    margin-top: 40px;
  }

  .trackCodeSraechBtn {
    margin-left: 10px;
    padding: 5px 15px;
    background-color: #FECA2E;
    border-color: #FFDB59;
  }

  .trackCodeSraechBtn:hover {
    color: #495060;
  }

  .trackStep {
    width: 900px;
    margin: 0 auto;
    height: 80px;
  }

  .trackLineBg {
    width: 900px;
    height: 25px;
  }

  .lightLine {
    float: left;
    width: 90px;
    height: 25px;
    border-bottom: 2px solid #f2f2f2;
  }

  .trackStep .active {
    border-bottom: 2px solid #50e3c2;
  }

  .trackStepContent {
    float: left;
    width: 90px;
    height: 80px;
    background-color: #fff;
  }

  .trackStepContentImgDiv {
    height: 50px;
    width: 90px;
    text-align: center;
  }

  .trackStepContentImgDiv img {
    height: 50px;
  }

  .trackStepState {
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #666;
  }
</style>
